<!-- 通讯录 -->
<template>
	<view class="pages">
		<scroll-view scroll-x="true" class="page-content" :scroll-left="scrollLeft">
			<view class="display">
				<view class="content" v-for="(item,index) in stepsList" :key="index">
					<view class="text" @click="onreturn(item, index)">{{item.title}}<u-icon style="display:inline-block" name="arrow-right" color="#CBC8CB" v-if="index+1 != stepsList.length"></u-icon></view>
				</view>
			</view>
		</scroll-view>
		<view >
			
			
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: [String, Object],
				default: ''
			},
			stepsList: {
				type: [Array],
				default:  () => []
			}
		},
		watch: {
			stepsList (val) {
				this.timer = setTimeout(() => {
					this.scrollLeft = 9999 + val.length
					if (this.timer) {
						clearTimeout(this.timer)
						this.timer = null
					}
				},200)
			}
		},
		data() {
			return {
				scrollLeft: 999,
				timer: null
			}
		},
		onLoad() {
			
		},
		
		methods: {
			onreturn (item, index) {
				this.$emit('click', item, index)
			}
		}
	}
</script>

<style lang="scss" scoped>
.pages{
	
	padding-top: 20rpx;
	width: 100%;
	.page-content{
		width: 100%;
		overflow:hidden;
		white-space:nowrap;
		.display{
			display: flex;
			align-items: center;
			.content{
				
				.text {
					font-size: 14px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #1E6FFF;
				}
			}
		}
		
	}
	
}

</style>
